<!--
 * @Descripttion: 
 * @version: 
 * @Author: -ViJia
 * @Date: 2022-02-10 16:26:27
 * @LastEditors: -ViJia
 * @LastEditTime: 2022-02-10 16:27:55
-->
<template>
  <div class="Main">
    <div class="MainTitle">商品列表</div>
    <div class="MianContent">
      <div
        class="MainTopAction"
        style="display: flex; justify-content: space-between"
      >
        <div class="MainTopActionOne flex">
          <a-button
            style="margin-right: 20px"
            type="primary"
            size="large"
            @click="toAddGoods"
            icon="plus"
            >新增{{ current == 1 ? "医药商品" : "普通商品" }}</a-button
          >
          <div v-if="current == 1">
            药监类目：
            <el-select
              v-model="drug_type"
              @change="selectDrugType"
              clearable
              placeholder="请选择药品类型"
            >
              <el-option
                v-for="item in drugTypeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="display: flex">
          <el-input
            placeholder="输入商品信息模糊搜索"
            v-model="keyword"
            @input="clearFn"
            @keyup.enter.native="searchList"
            clearable
          ></el-input>
          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="searchList"
            >搜索</el-button
          >
        </div>
      </div>
      <a-tabs v-model="current" @change="selectTabs">
        <a-tab-pane key="1" tab="医药商品"></a-tab-pane>
        <!-- <a-tab-pane key="2" tab="普通商品"></a-tab-pane> -->
        <!-- <a-tab-pane key="3" tab="易享农供应商品"></a-tab-pane> -->
      </a-tabs>
      <div>
        <a-table
          :columns="listfields"
          :data-source="listData"
          :bordered="true"
          :pagination="false"
        >
          <div slot="indexNum" slot-scope="row, index">
            {{ (pageno * 1 - 1) * pagesize + (index.indexNum * 1 + 1) }}
          </div>
          <div slot="action" slot-scope="row, index">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-around;
                margin-bottom: 6px;
              "
            >
              <el-button type="primary" size="mini" @click="EditItem(index.id,'edit')"
                >编辑</el-button
              >
              <el-button
                :type="index.status == 1 ? 'danger' : 'primary'"
                size="mini"
                @click="EditStatus(index)"
                >{{ index.status == 1 ? "下架" : "上架" }}</el-button
              >
              <!-- <el-button
                v-if="current == 2"
                type="primary"
                size="mini"
                @click="openCredit(index)"
                >积分商品</el-button
              > -->
              <!-- <a-popconfirm placement="bottom" ok-text="删除" cancel-text="取消" @confirm="DeleteItem(index)">
                  <template slot="title">
                      <p>警告</p>
                      <p>此操作将永久删除该文件, 是否继续?</p>
                  </template>
                  <a-button type="danger" size="small">删除</a-button>
              </a-popconfirm> -->
            </div>
          </div>
          <div slot="cate" slot-scope="row, index">
            {{ row ? row : index.cate_pid }}
          </div>
          <div slot="logo" slot-scope="row, index">
            <div @click="ClickLookImage(row)" v-if="row">
              <img :src="row[0]" style="width: 50px; height: 50px" />
            </div>
          </div>
          <div slot="image" slot-scope="row, index">
            <div @click="ClickLookImage(row)" v-if="row">
              <img :src="row[0]" style="width: 50px; height: 50px" />
            </div>
          </div>
          <div slot="status" slot-scope="row, index">
            {{ row == 1 ? "上架" : "下架" }}
          </div>
          <div slot="drug_type" slot-scope="row, index">
            {{
              row == 1
                ? "普通药品"
                : row == 2
                ? "保健品"
                : row == 3
                ? "医疗器械"
                : row == 4
                ? "中药类"
                : ""
            }}
          </div>
          <div slot="sort" slot-scope="row, index">
            <div>
              <a-input
                style="width: 100px"
                v-model="index.sort"
                @blur="changeSort(index)"
              ></a-input>
            </div>
          </div>
        </a-table>
        <Pagination
          :total="total"
          v-model="pageno"
          :pageSize.sync="pagesize"
          @change="handlePageChange"
          @onShowSizeChange="onShowSizeChange"
        ></Pagination>
      </div>
    </div>
    <a-modal v-model="LookImages" :footer="null" centered>
      <div style="margin: 10px">
        <!-- <img :src="SelectImg" style="width: 100%;height: 100%;"> -->
        <a-carousel arrows :dots="false">
          <div
            slot="prevArrow"
            slot-scope="props"
            class="custom-slick-arrow"
            style="left: 10px; zindex: 1"
          >
            <a-icon type="left-circle" />
          </div>
          <div
            slot="nextArrow"
            slot-scope="props"
            class="custom-slick-arrow"
            style="right: 10px; zindex: 1"
          >
            <a-icon type="right-circle" />
          </div>
          <div
            style="overflow: hidden"
            v-for="(item, index) in SelectImg"
            :key="index"
          >
            <img style="width: 100%; height: 100%" :src="item" alt="" />
          </div>
        </a-carousel>
      </div>
    </a-modal>

    <a-modal
      title="积分商品"
      v-model="visibleSend"
      :width="620"
      :centered="true"
      :maskClosable="false"
      @ok="handleOkSend"
      @cancel="handleCancelSend"
    >
      <div style="padding-left: 10px">
        <a-form-model
          ref="ruleFormOne"
          :model="formOne"
          :rules="rulesOne"
          :label-col="labelColOne"
          :wrapper-col="wrapperColOne"
        >
          <a-form-model-item label="是否积分商品" prop="is_credit">
            <a-radio-group v-model="formOne.is_credit">
              <a-radio :value="0">否</a-radio>
              <a-radio :value="1">是</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="是否积分商城" prop="is_credit_mall">
            <a-radio-group v-model="formOne.is_credit_mall">
              <a-radio :value="0">否</a-radio>
              <a-radio :value="1">是</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="积分" prop="credit">
            <a-input
              v-model="formOne.credit"
              type="number"
              placeholder="请输入积分"
            ></a-input>
          </a-form-model-item>
          <a-form-model-item label="积分价" prop="credit_price">
            <a-input
              v-model="formOne.credit_price"
              type="number"
              placeholder="请输入积分价"
            ></a-input>
          </a-form-model-item>
          <a-form-model-item label="积分商品库存" prop="credit_stock_num">
            <a-input
              v-model="formOne.credit_stock_num"
              type="number"
              placeholder="请输入积分商品库存"
            ></a-input>
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-modal>

    <a-modal
      title="新增医药商品"
      v-if="visible"
      v-model="visible"
      :width="720"
      :centered="true"
      :maskClosable="false"
      :footer="null"
    >
      <div style="padding: 0px 10px">
        <div style="display: flex;">
          <el-input
            placeholder="输入药准字号搜索药品"
            v-model="codeKeyword"
            @input="clearFn"
            @keyup.enter.native="searchProduct"
            clearable
          ></el-input>
          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="searchProduct"
            >搜索</el-button
          >
        </div>
        <div style="margin-top:10px;">
          <a-table
            :columns="listfieldsProduct"
            :data-source="storeGoodsListData"
            :bordered="true"
            :pagination="false"
          >
            <div slot="indexNum" slot-scope="row, index">
              {{ (pageno * 1 - 1) * pagesize + (index.indexNum * 1 + 1) }}
            </div>
            <div slot="action" slot-scope="row, index">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-around;
                  margin-bottom: 6px;
                "
              >
                <el-button
                  type="primary"
                  size="mini"
                  @click="EditItem(index.id,'view')"
                  >查看</el-button
                >
              </div>
            </div>
            <div slot="logo" slot-scope="row, index">
              <div @click="ClickLookImage(row)" v-if="row">
                <img :src="row[0]" style="width: 50px; height: 50px" />
              </div>
            </div>
            <div slot="image" slot-scope="row, index">
              <div @click="ClickLookImage(row)" v-if="row">
                <img :src="row[0]" style="width: 50px; height: 50px" />
              </div>
            </div>
          </a-table>
          <Pagination
            :total="totalStore"
            v-model="pagenoStore"
            :pageSize.sync="pagesizeStore"
            @change="handlePageChangeStore"
            @onShowSizeChange="onShowSizeChangeStore"
          ></Pagination>
        </div>
      </div>
      <!-- <template slot="footer">
        <div>
          <a-button size="small" @click="handleCancel">取消</a-button>
          <a-button
            type="primary"
            size="small"
            @click="handleOk"
            :loading="creatLoading"
            >确定</a-button
          >
        </div>
      </template> -->
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue';
import { ACCESS_TOKEN, USER_DATA } from '@/store/mutation-types';
import { mapGetters, mapState, mapActions } from "vuex";
import { showErrors, showError, showSuccess } from "@/utils/showMsg";
import Pagination from "@/components/common/pagination.vue";
import UploadImage from "@/components/common/Upload";
import {
  ShopGoodsList,
  ShopGoodsEditStatus,
  GetCateList,
  SetCredit,
  SetProductSort,
  SetPointsProduct,

  StoreShopGoodsList,
  StoreShopGoodsView
} from "@/api/api.js";
import { ShopGoodsIndex } from "@/views/Columns/ShopGoods.js";
export default {
  name: "list",
  components: {
    Pagination,
    UploadImage,
  },
  data() {
    return {
      currentPage: 1, //当前页码
      total: 0, //定义初始有多少条数据
      keyword: "",
      pageno: 1, //默认第几页
      pagesize: 10, //一页显示多少条数据


      listData: [], //表格数据
      MadalTitle: "",
      listfields: ShopGoodsIndex,
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      visible: false, //modal显示隐藏
      EditId: null, //选择编辑存储的id
      LookImages: false, //查看图片的modal显示隐藏
      SelectImg: "", //选择的图片链接

      drug_type: "", //选择的类目
      drugTypeList: [
        {
          name: "普通药品",
          value: 1,
        },
        {
          name: "保健品",
          value: 2,
        },
        {
          name: "医疗器械",
          value: 3,
        },
        {
          name: "中医类",
          value: 4,
        },
      ],
      current: "1", //tabs

      visibleSend: false,
      labelColOne: { span: 4 },
      wrapperColOne: { span: 20 },
      formOne: {
        is_credit: 0,
        is_credit_mall: 0,
        credit: "",
        credit_price: "",
      },
      rulesOne: {
        credit: [{ required: true, message: "请输入积分", trigger: "blur" }],
        credit_price: [
          { required: true, message: "请输入积分价", trigger: "blur" },
        ],
        credit_stock_num: [
          { required: true, message: "请输入积分商品库存", trigger: "blur" },
        ],
      },
      shopInfo: {}, //选择要设置的积分商品


      //商品库
      storeGoodsListData:[], //商品库商品
      totalStore: 0, //定义初始有多少条数据
      codeKeyword: "",
      pagenoStore: 1, //默认第几页
      pagesizeStore: 10, //一页显示多少条数据
      listfieldsProduct: [
        {
          title: "序号",
          dataIndex: "index",
          scopedSlots: { customRender: "indexNum" },
          align: "center",
          width: 70,
        },
        {
          title: "商品ID",
          dataIndex: "id",
          align: "center",
        },
        {
            title: '商品标题',
            dataIndex: 'title',
            align: 'center',
            width: 250,
        },
        {
            title: '商品图标',
            dataIndex: 'logo',
            scopedSlots: { customRender: 'logo' },
            align: 'center',
        },
        {
            title: '分类',
            dataIndex: 'cate_id',
            scopedSlots: { customRender: 'cate' },
            align: 'center',
        },
        {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            align: 'center',
            width: 60,
        }
      ],

    };
  },
  computed: {},
  created() {},
  mounted() {
    this.GetList();
  },
  methods: {
    // 修改排序
    async changeSort(row) {
      const that = this;
      let sort = { [`${row.id}`]: row.sort };
      sort = JSON.stringify(sort);
      let res = await SetProductSort({ sort });
      if (res.data.code == 1) {
        showSuccess("修改成功");
        that.GetList();
      } else {
        showError(res.data.msg);
      }
    },

    // 积分商品按钮
    openCredit(item) {
      const that = this;
      that.visibleSend = true;
      that.shopInfo = item;
      that.formOne.is_credit = item.is_credit;
      that.formOne.is_credit_mall = item.is_credit_mall;
      that.formOne.credit = item.credit;
      that.formOne.credit_price = item.credit_price;
      that.formOne.credit_stock_num = item.credit_stock_num;
    },
    // 积分商品弹出确定
    async handleOkSend() {
      const that = this;
      that.$refs["ruleFormOne"].validate(async (valid) => {
        console.log(valid);
        if (valid) {
          let params = {
            product_id: that.shopInfo.id,
            is_credit: that.formOne.is_credit,
            is_credit_mall: that.formOne.is_credit_mall,
            credit: that.formOne.credit,
            credit_price: that.formOne.credit_price,
            credit_stock_num: that.formOne.credit_stock_num,
          };
          let res = await SetPointsProduct(params);
          if (res.data.code == 1) {
            showSuccess("保存成功！");
            that.visibleSend = false;
            that.$refs.ruleFormOne.resetFields();
            that.GetList();
          } else {
            showError(res.data.msg);
          }
        }
      });
    },
    // 积分商品弹出取消
    handleCancelSend() {
      const that = this;
      that.shopInfo = {};
      that.formOne.is_credit = 0;
      that.formOne.is_credit_mall = 0;
      that.formOne.credit = "";
      that.formOne.credit_price = "";
      that.formOne.credit_stock_num = "";
    },

    // 选择tabs
    selectTabs() {
      const that = this;
      if (that.current == 1) {
        this.GetFields();
      } else {
        this.GetFields("product");
      }
      that.pageno = 1;
      that.pagesize = 10;
      that.GetList();
    },

    // 获取分类列表
    GetCateList() {},

    // 选择药监类目
    selectDrugType() {
      const that = this;
      that.pageno = 1;
      that.pagesize = 10;
      that.GetList();
    },

    // 搜索按钮
    searchList() {
      const that = this;
      that.pageno = 1;
      that.pagesize = 10;
      that.GetList();
    },
    // 清空输入框
    clearFn() {
      const that = this;
      if (!that.keyword) {
        that.pageno = 1;
        that.pagesize = 10;
        that.GetList();
      }
    },

    // 查看图片
    ClickLookImage(row) {
      this.SelectImg = row;
      this.LookImages = true;
    },
    // 获取数据列表API
    async GetList() {
      var that = this;
      const user = Vue.ls.get(USER_DATA);
      let params = {
        keyword: that.keyword,
        store_id:user.identityId,
        page: that.pageno,
        pagesize: that.pagesize,
        drug_type: that.drug_type,
        type: that.current,
      };
      const res = await ShopGoodsList(params);
      if (res.data.code == "1") {
        const data = res.data.data;
        if (data.list.length > 0) {
          data.list.forEach((item, index) => {
            item.key = item.id;
            item.logo = item.logo.split(",");
            item.indexNum = index;
            item.create_time = that
              .$moment(item.create_time * 1000)
              .format("YYYY-MM-DD  HH:mm:ss"); //时间戳转换成时间
          });
        }
        // console.log(data);
        that.total = data.count;
        that.listData = data.list;
      } else {
        showError(res.data.msg);
      }
    },

    // 搜索商品库
    searchProduct(){
      const that = this;
      that.pagenoStore = 1;
      that.pagesizeStore = 10;
      that.StoreShopGoodsList()
    },

    // 获取数据列表API
    async StoreShopGoodsList() {
      var that = this;
      let params = {
        code:that.codeKeyword,
        keyword: '',
        page: that.pagenoStore,
        pagesize: that.pagesizeStore,
        drug_type: '',
        type: that.current,
      };
      const res = await StoreShopGoodsList(params);
      if (res.data.code == "1") {
        const data = res.data.data;
        if (data.length > 0) {
          data.forEach((item, index) => {
            item.key = item.id;
            item.logo = item.logo.split(",");
            item.indexNum = index;
            item.create_time = that
              .$moment(item.create_time * 1000)
              .format("YYYY-MM-DD  HH:mm:ss"); //时间戳转换成时间
          });
        }
        // console.log(data);
        that.totalStore = data.length;
        that.storeGoodsListData = data;
      } else {
        showError(res.data.msg);
      }
    },

    // 新增按钮
    toAddGoods() {
      const that = this;
      // if(that.current == 1){
      //   that.$router.push({ name: "goodsDetails", query: {} });
      // }else{
      //   that.$router.push({ name:'productDetails', query: {}})
      // }
      that.visible = true;
    },
    // 编辑按钮
    EditItem(id,type) {
      const that = this;
      if (type == 'view') {
        //医药商品
        that.$router.push({ name: "goodsDetails", query: { id } });
      } else {
        that.$router.push({ name: "goodsDetailsEdit", query: { id } });
      }
    },
    // 更改状态
    async EditStatus(row) {
      const that = this;
      let params = {
        id: row.id,
        status: row.status == 0 ? 1 : 0,
      };
      let res = await ShopGoodsEditStatus(params);
      if (res.data.code == 1) {
        showSuccess("操作成功");
        that.GetList();
      } else {
        showError(res.data.msg);
      }
    },

    //分页器
    handlePageChange(pageno, pagesize) {
      //点击第几页触发的函数
      this.pageno = pageno;
      this.pagesize = pagesize;
      this.GetList(); //这个是向后台请求的数据函数
    },
    //切换每页显示多少条
    onShowSizeChange(current, size) {
      //改变每页显示条目数的函数
      //pagesize 变化的回调
      this.pageno = current;
      this.pagesize = size;
      this.GetList(); //这个是向后台请求的数据函数
    },

    
    //分页器
    handlePageChangeStore(pageno, pagesize) {
      //点击第几页触发的函数
      this.pagenoStore = pageno;
      this.pagesizeStore = pagesize;
      this.GetList(); //这个是向后台请求的数据函数
    },
    //切换每页显示多少条
    onShowSizeChangeStore(current, size) {
      //改变每页显示条目数的函数
      //pagesize 变化的回调
      this.pagenoStore = current;
      this.pagesizeStore = size;
      this.GetList(); //这个是向后台请求的数据函数
    },
    // 返回
    backBtn() {
      this.$router.back(1);
    },
  },
};
</script>

<style scoped lang="less">
.editable-row-operations a {
  margin-right: 12px;
}

.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;

  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }

  .MainTitle:before {
    content: "";
    width: 40px;
    height: 12px;
    background: linear-gradient(
      270deg,
      rgba(0, 158, 238, 0) 0%,
      rgba(0, 158, 238, 0.3) 100%
    );
    position: absolute;
    bottom: 2px;
    left: 0;
  }

  .MianContent {
    padding: 10px 20px 20px 20px;

    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .MainTopActionView {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .MainTopActionOne {
          margin-right: 30px;

          span {
            margin-right: 20px;
          }
        }

        .MainTopActionTwo {
          span {
            margin-right: 20px;
          }
        }
      }

      .MainTopActionThree {
        display: flex;
        align-items: center;
        margin-left: 20px;
      }
    }
  }
}

.ant-carousel .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel .custom-slick-arrow {
  width: 30px;
  height: 30px;
  font-size: 30px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.4;
}
.ant-carousel .custom-slick-arrow:before {
  display: none;
}
.ant-carousel .custom-slick-arrow:hover {
  opacity: 0.6;
}

// .ant-carousel .slick-slide h3 {
//   color: #fff;
// }
.ant-carousel .slick-dots li button {
  background: #009eee;
}
.ant-carousel .slick-dots li.slick-active button {
  background: #009eee;
}
</style>